<template>
  <div id="app">
   <button @click="onTab">点我切换展示组件</button>
    <keep-alive>
      <component :is="componentShow"></component>
    </keep-alive>

  </div>
</template>

<script>
import Right from "@/components/Right";
import Left from "@/components/Left";
export default {
  name: 'App',
  data(){
    return{
      componentShow:"Right",
      //控制展示哪个组件的开关
      flag:true
  }},
  components: {
    Right,
    Left
  },
  methods:{
    onTab(){
      this.flag=!this.flag;
      this.componentShow=this.flag?"Right":"Left";
    }
  }
}
</script>

<style lang="less">

</style>
